<template>
    <div>
        mvvm模式 : 模型(model) 视图(view) vm(视图数据)
        数据变化 == > 视图变化
        视图变化 == > 数据变化
        中间有 v-model 双向绑定
    </div> <br>
    <div>
        <span>用户名：</span>
        <input type="text" v-model="username"> {{ username }} <br>
        <span>密码：</span>
        <input type="password" v-model="pwd"> {{ pwd }}
    </div>
    {{ from }}
    <select v-model="from">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
    </select>

    <div>
        <span>爱好：</span>
        <input type="checkbox" value="吃饭" v-model="hobby"> 吃饭
        <input type="checkbox" value="睡觉" v-model="hobby"> 睡觉
        <input type="checkbox" value="打豆豆" v-model="hobby"> 打豆豆
        {{ hobby }}
    </div>
    <div>
        <span>性别：</span>
        <input type="radio" value="男" v-model="sex"> 男
        <input type="radio" value="女" v-model="sex"> 女
        <!-- <input type="radio" value=""> -->
         {{ sex }}
    </div>
    <div>
        <span>个人名言：</span>
        <textarea v-model="texts"></textarea>
        {{ texts }}
    </div>
    <h1>v-model的修饰符： number trim 去空白 lazy </h1>
    <div >
        <span>数字类型</span>
        <input type="text" v-model.number="pwd">
        <p>输入框：</p>
        <input type="text" v-model.trim="texts">
    </div>
    <h2>v-html 对标的是 v-text </h2>
    <p v-text="str"></p>
    <p v-html="str"></p>
</template>

<script setup>
import { ref } from 'vue'
const username = ref('admin')
const pwd = ref('123456')
const from = ref('北京')
const hobby = ref(['吃饭'])
const sex = ref('男')
const texts = ref('')
const str = ref('<h1>hello<span style="color:red">vue3 你今天是否看上我</span></h1>')
</script>

<style  scoped>

</style>